<template>
    <div>
        <div id="search">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="菜单名称">
                    <el-input placeholder="请输入菜单名" v-model="authName"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchAuth">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div id="header-bth">
            <el-button type="primary" size="small" @click="showAddAuthForm">新增</el-button>
        </div>
        <div id="auth-table">
            <el-table
                    ref="tableList"
                    :data="tableData"
                    style="width: 100%;"
                    row-key="id">
                <el-table-column
                        prop="title"
                        label="菜单名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="icon"
                        label="图标"
                        width="180">
                    <template slot-scope="scope">
                        <i :class="scope.row.icon"></i>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="permission"
                        label="权限标识">
                </el-table-column>
                <el-table-column
                        prop="path"
                        label="组件路由">
                </el-table-column>
                <el-table-column
                        prop="component"
                        label="组件名称">
                </el-table-column>
                <el-table-column label="操作" width="180px">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-popconfirm title="确定删除吗？" @confirm="deleteConfirm(scope.$index, scope.row)">
                            <el-button slot="reference" size="mini" type="danger">删除</el-button>
                        </el-popconfirm>

                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--添加 编辑权限信息弹窗-->
        <el-dialog :title="title" :visible.sync="addAuthFormVisible" width="40%" @close="handleClear">
            <el-form :model="authForm" ref="authInfo" :rules="authRules" label-width="80px" size="medium"
                     label-position="left">
                <el-input v-model="authForm.id" autocomplete="off" v-show="false"></el-input>
                <el-form-item label="上级菜单" prop="pid">
                    <el-select v-model="authForm.pid"  ref="select" placeholder="请选择" style="width: 100%">
                        <el-option key="id" hidden :value="id" :label="label"></el-option>
                        <el-tree  ref="tree"
                                   style="padding: 0px 10px 10px 0px"                  
                                   :data="list"                    
                                   :expand-on-click-node="false"                  
                                   node-key="id"                    
                                   :default-expand-all="true"
                                   @node-click="handleCheck"              
                        >                                          
                        </el-tree>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单类型" prop="isMenu">
                    <el-radio-group v-model="authForm.isMenu">
                        <el-radio :label="0">目录</el-radio>
                        <el-radio :label="1">菜单</el-radio>
                        <el-radio :label="2">按钮</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="名称" prop="title">
                    <el-input v-model="authForm.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="目录图标" prop="icon">
                    <!--图标选择器-->
                    <e-icon-picker v-model="authForm.icon"/>
                </el-form-item>

                <el-form-item label="权限标识" prop="permission">
                    <el-input v-model="authForm.permission" autocomplete="off" placeholder="按钮权限标识"></el-input>
                </el-form-item>

                <el-form-item label="组件名称" prop="component">
                    <el-input v-model="authForm.component" autocomplete="off" placeholder="菜单组件名称"></el-input>
                </el-form-item>

                <el-form-item label="组件路径" prop="path">
                    <el-input v-model="authForm.path" autocomplete="off" placeholder="菜单路径"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addAuthInfo">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        addPermissionApi,
        deletePermissionByIdApi,
        getAuthTreeApi,
        getPermissionByIdApi,
        getPermissionByNameApi
    } from "@/request/api";
    import {listToTree} from "@/util/treeUtil";

    export default {
        name: "AuthView",
        data() {
            return {
                authName:'',
                title:'',
                tableData: [],
                authForm: {
                    isMenu: 0,
                    pid: '',
                },
                menuType: 0,
                label: '',
                id: '',
                list: [],
                addAuthFormVisible: false,
                authRules: {
                    pid: [
                        {required: true, message: '请选择父菜单', trigger: 'blur'}
                    ],
                    isMenu: [
                        {required: true, message: '请填写类型', trigger: 'blur'}
                    ],
                    title: [
                        {required: true, message: '请填写名称', trigger: 'blur'}
                    ]
                }
            }

        },
        methods: {
            //搜所权限
            searchAuth(){
                //  发送异步请求 查询权限信息
                if (this.authName){
                    getPermissionByNameApi(this.authName).then(response=>{
                        this.tableData =[response.data]
                    })
                    return
                }
                this.toTree()
            },
            // 删除权限
            deleteConfirm(index, row) {
                deletePermissionByIdApi(row.id).then(response=>{
                    if (response.code==200){
                        this.$message.success(response.msg)
                        this.toTree()
                        return
                    }
                    this.$message.warning(response.msg)
                }).catch(error=>{
                    this.$message.error("请求失败")
                })
            },
            showAddAuthForm(){
                this.title='添加菜单'
                this.addAuthFormVisible = true
            },
            handleCheck(val) {
                // 点击节点获取 名称 赋值给label 显示在ei-options中
                this.label = val.label
                this.id = val.id
                this.authForm.pid = val.id
                // 选择完毕关闭 下拉选
                this.$refs.select.blur()
            },
            // 关闭弹窗  清除验证规则
            handleClear() {
                this.authForm = {
                    isMenu: 0
                }
                this.$refs.authInfo.clearValidate()
                this.toTree()
            },
            // 编辑权限
            handleEdit(index, row) {
                this.title = "编辑菜单"
                this.addAuthFormVisible = true
                // 根据id 查询权限信息
                getPermissionByIdApi(row.id).then(response => {
                    this.authForm = response.data.permission
                    if (this.authForm.pid != 0) {
                        this.label = response.data.parentTitle
                        this.id = response.data.permission.pid
                        return
                    }
                    // 目录 系统管理  回显上级菜单时  显示主目录
                    this.label = '主目录'
                    this.id = 0
                    console.log(this.authForm)
                })
            },
            addAuthInfo() {
                this.$refs.authInfo.validate(valid => {
                    if (!valid) {
                        this.$message.warning("请填写完整的信息")
                        return
                    }
                    // 发送异步请求 添加菜单信息
                    addPermissionApi(this.authForm).then(response=>{
                        if (response.code==200){
                            this.$message.success(response.msg);
                            this.addAuthFormVisible =false
                            this.toTree()
                            return
                        }
                        this.$message.warning(response.msg);
                    })
                    console.log(this.authForm)
                })
            },
            async toTree(){
                let {data} = await getAuthTreeApi()
                this.tableData = listToTree(data)
                //  过滤数据 排除按钮级别权限  渲染上级菜单下拉选   [{},{}]  ->[{label,id,pid}]
                data = data.filter(dt => dt.isMenu != 2);
                let permissions = data.map(p => {
                    return {
                        label: p.title,
                        id: p.id,
                        pid: p.pid
                    }
                })
                //   permissions [{label:,id:,pid:}]
                let select = {
                    label: '主目录',
                    id: 0,
                    children: [...listToTree(permissions)]
                }
                this.list = [select]
            }
        },
        // 生命周期 - 挂载完成（可以访问DOM元素）
       created() {
           this.toTree()
        }
    }
</script>

<style scoped>
    #search {
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #eee;
    }

    #search, #header-bth {
        margin: 15px;
    }

    #auth-table {
        height: 100%;
    }
</style>
